<!-- @format -->

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { DEF_FONT_SIZE } from './conf'
// 这是一个文本框
const props: any = defineProps({
  conf: {},
})
const content = computed(() => {
  const result = props.conf.content || ''
  return result
})
const styl = computed(() => {
  return {
    color: props.conf.color,
    fontSize: (props.conf.fontSize || DEF_FONT_SIZE) + 'rpx',
    'background-color': props.conf.bgColor,
    'font-weight': props.conf.bold ? 'bold' : 'normal',
  }
})
</script>

<template>
  <div class="node-text" :style="{ ...styl }">{{ content }}</div>
</template>

<style scoped>
.node-text {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  line-height: 1.5;
}
</style>
